<template>
  <a-layout>
    <a-layout-content style="background-color: #F2F2E6; min-height: 1000px">
      <div style="padding-top: 8vh">
        <v-row no-gutters justify-lg="center">
          <v-col cols="12" lg="10">
            <v-row dense>

<!--              左边-->
              <v-col cols="12" lg="3">
                <div style="position: sticky; top: 55px;">
                  <v-row dense>
                    <!--                  个人信息展示-->
                    <v-col cols="12" lg="12">
                      <v-card elevation="1" color="rgba(255,255,255,0.3)">
                        <v-container>
                          <!--                        用户头像昵称-->
                          <div>
                            <v-avatar size="40" @click="visitUser(userInfo.id)" style="cursor: pointer">
                              <img
                                alt="user"
                                :src="userInfo.profilepic"
                              >
                            </v-avatar>
                            <span style="font-family: 微软雅黑,serif; cursor: pointer" @click="visitUser(userInfo.id)">
                            &nbsp;&nbsp;{{userInfo.nickname}}
                          </span>
                          </div>
                          <br>
                          <v-divider></v-divider>
                          <br>
                          <!--                        用户总计统计数据-->
                          <v-row justify-lg="space-around" dense>
                            <v-col cols="12" lg="2" style="text-align: center">
                              <span>{{userSolutionInfo.view}}</span>
                            </v-col>
                            <v-col cols="12" lg="2" style="text-align: center">
                              <span>{{userSolutionInfo.solutionCount}}</span>
                            </v-col>
                            <v-col cols="12" lg="2" style="text-align: center">
                              <span>{{userSolutionInfo.fanCount}}</span>
                            </v-col>
                            <v-col cols="12" lg="2" style="text-align: center" v-if="true">
                              <span>{{userSolutionInfo.commentedCount}}</span>
                            </v-col>
                            <v-col cols="12" lg="2" style="text-align: center">
                              <span>{{userSolutionInfo.collectedCount}}</span>
                            </v-col>
                          </v-row>
                          <v-row justify-lg="space-around" dense>
                            <v-col cols="12" lg="2" style="text-align: center">
                              <span>访问</span>
                            </v-col>
                            <v-col cols="12" lg="2" style="text-align: center">
                              <span>作品</span>
                            </v-col>
                            <v-col cols="12" lg="2" style="text-align: center">
                              <span>粉丝</span>
                            </v-col>
                            <v-col cols="12" lg="2" style="text-align: center" v-if="true">
                              <span>评论</span>
                            </v-col>
                            <v-col cols="12" lg="2" style="text-align: center">
                              <span>收藏</span>
                            </v-col>
                          </v-row>
                          <v-row justify-lg="center">
                            <v-col cols="12" lg="6">
                              <div style="text-align: center; margin-bottom: 1vh">
                                <v-btn rounded
                                       outlined
                                       block
                                       elevation="0"
                                       @click="followAction"
                                       :color="followState ? '#89B8CA' : '#2C2E2D'"
                                       v-if="!isMine">
                                  <span style="font-weight: bold">{{followState ? '已关注' : '关注'}}</span>
                                  <v-icon>{{followState ? 'mdi-check-all' : 'mdi-cursor-default-click-outline'}}</v-icon>
                                </v-btn>
                              </div>

                            </v-col>
                          </v-row>
                        </v-container>
                      </v-card>
                    </v-col>
                    <!--                  打分-->
                    <v-col cols="12" lg="12">
                      <v-card elevation="1" color="#f6f6ee">
                        <v-card-subtitle>
                        <span style="font-family: 黑体,serif; font-size: 16px; font-weight: bolder">
                          解决方案评分
                        </span>
                        </v-card-subtitle>
                        <v-card-text v-if="score_data !== null">
                          <v-row no-gutters>
                            <v-col cols="12" lg="3">
                              <v-subheader>
                                <span style="font-family: number,serif; font-size: x-large; font-weight: bold">{{Number(score_data.score).toFixed(2)}}</span>
                              </v-subheader>
                            </v-col>
                            <v-col cols="12" lg="1"></v-col>
                            <v-col cols="12" lg="5">
                              <v-subheader>
                                <v-row no-gutters>
                                  <v-col cols="12" lg="12">
                                    <v-rating
                                      v-model="score_data.score"
                                      background-color="grey"
                                      color="#89b8ca"
                                      dense
                                      half-increments
                                      readonly
                                      size="16"
                                    ></v-rating>
                                  </v-col>
                                  <v-col cols="12" lg="12">
                                    <span style="font-size: small">{{score_data.count}}人参与评分</span>
                                  </v-col>
                                </v-row>
                              </v-subheader>
                            </v-col>
                          </v-row>
                        </v-card-text>
                        <v-card-text v-else>
                          <v-img src="../../public/images/empty_score.png" width="13vw" style="margin-left: 1vw"></v-img>
                        </v-card-text>
                        <v-container>
                          <v-divider></v-divider>
                          <br>
                          <v-card-actions>
                            <span>我的评价：</span>
                            &emsp;
                            <v-rating
                              v-model="rating"
                              @input="give_score"
                              background-color="grey"
                              color="#89b8ca"
                              dense
                              hover
                              size="22"
                            ></v-rating>
                            <span>({{ rating }})</span>
                          </v-card-actions>
                        </v-container>
                      </v-card>
                    </v-col>

                    <!--                  最近三篇文章-->
                    <v-col cols="12" lg="12" v-if="recent_solution.length !== 0">
                      <v-card elevation="1" color="#f6f6ee">
                        <v-card-subtitle>
                        <span style="font-family: 黑体,serif; font-size: 16px; font-weight: bolder">
                          最新解决方案
                        </span>
                        </v-card-subtitle>
                        <v-list color="#f6f6ee" >
                          <template v-for="(item, index) in this.recent_solution">
                            <v-list-item :key="index" @click="visit(item)">
                              <v-list-item-content>
                              <span>
                                {{item.name}}&nbsp;
                                <div class="float-lg-right">
                                  <v-icon left size="18px">
                                mdi-eye
                                </v-icon>
                                {{item.view}}
                                </div>
                              </span>
                              </v-list-item-content>
                            </v-list-item>
                          </template>
                        </v-list>
                      </v-card>
                    </v-col>
                  </v-row>
                </div>
              </v-col>

<!--              右边-->
              <v-col cols="12" lg="9">
                <v-row dense>
                  <v-col cols="12" lg="12">
                    <v-sheet rounded elevation="0" color="rgba(255,255,255,0.5)">
                      <v-container>
                        <!--                        标题-->
                        <div style="text-align: center">
                          <span style="font-size: 28px;font-weight: 600">{{solutionBaseInfo.name}}</span>
                        </div>
                        <br>
                        <v-card height="6vh" flat color="#F9F9F3">
                          <v-subheader style="color: rgba(114,117,124,0.8)">
                            &nbsp;&nbsp;
                            <v-icon size="20px" left>mdi-clock</v-icon>
                            发布于&nbsp;{{solution_info.createTime}}
                            &emsp;&emsp;
                            <v-icon size="20px" left>mdi-eye</v-icon>
                            浏览&nbsp;{{solutionBaseInfo.view}}
                          </v-subheader>
                        </v-card>
                        <mavon-editor
                          class="md"
                          :value="content"
                          :subfield="false"
                          :defaultOpen="'preview'"
                          :toolbarsFlag="false"
                          :editable="false"
                          :scrollStyle="true"
                          :ishljs="true"
                          :boxShadow="false"
                          previewBackground="#F9F9F3"
                          style="z-index: 1 !important;"
                        />
                      </v-container>
                      <!--                        评论、收藏-->
                      <v-card height="6vh" tile color="#F9F9F3" elevation="1">
                        <v-subheader style="color: #F9F9F3">
                          <v-spacer></v-spacer>
                          <v-btn icon @click="goto_comment" v-if="true">
                            <v-icon>
                              mdi-comment-processing-outline
                            </v-icon>
                          </v-btn>
                          <a style="color: #2C2E2D" @click="goto_comment" v-if="true">评论&nbsp;{{this.comment_count}}</a>
                          &emsp;&emsp;
                          <v-btn elevation="0"
                                 icon
                                 @click="collectAction">
                            <v-icon>{{collectState ? 'mdi-star-face' : 'mdi-star-plus-outline'}}</v-icon>
                          </v-btn>
                          <a style="color: #2C2E2D" @click="collectAction">收藏&nbsp;{{solution_info.collections}}</a>
                          &emsp;&emsp;&emsp;
                        </v-subheader>
                      </v-card>
                    </v-sheet>
                  </v-col>
                  <v-col cols="12" lg="12" v-if="true">
                    <!--                    评论区-->
                    <v-sheet ref="comment_area" color="rgba(255,255,255,0.5)">
                      <v-container>
                        <span style="font-weight: bold; font-family: 微软雅黑,serif; font-size: 22px">评论</span>
                        <!--                        评论输入框-->
                        <div style="padding-top: 1vh">
                          <a-textarea
                            id="comm"
                            style="background-color: rgba(255,255,255,0.5)"
                            v-model="comment_content"
                            placeholder='请发表有价值的评论'
                            :auto-size="{ minRows: 4, maxRows: 6 }"
                            @onchange="word_limit($event)"
                            @onkeydown="word_limit($event)"
                            :onkeyup="word_limit()"
                          />
                          <v-row no-gutters justify-lg="end">
                            <v-col cols="12" lg="9" style="text-align: left">
                              <v-subheader>
                                还可输入&nbsp;&nbsp;<span style="color: #2C2E2D">{{input_length}}</span>&nbsp;&nbsp;个字符
                              </v-subheader>
                            </v-col>
                            <v-col cols="12" lg="1" style="text-align: right">
                              <v-subheader>
                                <v-menu scale offset-y>
                                  <template v-slot:activator="{ on, attrs }">
                                    <v-btn v-bind="attrs" v-on="on" icon @click="picker_selected = 'comm'">
                                      <v-icon>mdi-emoticon</v-icon>
                                    </v-btn>
                                  </template>
                                  <!--                          评论输入框的表情选择器-->
                                  <picker
                                    style="height: 25vh"
                                    :include="['people','Smileys']"
                                    :showSearch="false"
                                    :showPreview="false"
                                    :showCategories="false"
                                    @select="addEmoji"
                                  />
                                </v-menu>
                              </v-subheader>
                            </v-col>
                            <v-col cols="12" lg="2" style="text-align: center">
                              <v-subheader>
                                <v-btn rounded outlined color="grey" width="8vw" @click="send_comment">
                                  <span style="color: #2C2E2D">发表评论</span>
                                </v-btn>
                              </v-subheader>
                            </v-col>
                          </v-row>
                        </div>
                        <v-list three-line :key="children_show" style="background-color: #F9F9F3">
                          <template v-for="(item, index) in comment_list">
                            <v-divider></v-divider>
                            <v-list-item :key="index">
                              <v-list-item-avatar size="32" @click="visitUser(item.userId)" style="cursor: pointer">
                                <v-img :src="item.profilepic"></v-img>
                              </v-list-item-avatar>
                              <v-list-item-content>
                                <v-list-item-subtitle style="padding-bottom: 1vh">
                                  <v-row no-gutters>
                                    <v-col cols="12" lg="6" style="text-align: left">
                                      <span @click="visitUser(item.userId)" style="cursor: pointer">{{item.nickname}}</span>
                                      &nbsp;&nbsp;&nbsp;&nbsp;<span>{{item.relativeTime}}</span>
                                    </v-col>
                                    <v-col cols="12" lg="4"></v-col>
                                    <!--                                    评论删除按钮-->
                                    <v-col cols="12" lg="1">
                                      <v-dialog
                                        max-width="370"
                                      >
                                        <template v-slot:activator="{ on, attrs }">
                                          <a type="text" style="color: #2C2E2D"
                                             v-bind="attrs"
                                             v-on="on"
                                             v-if="isMine || item.mine">
                                            <v-icon left size="18px">mdi-delete-empty-outline</v-icon>
                                            <span>删除</span>
                                          </a>
                                        </template>
                                        <template v-slot:default="dialog">
                                          <v-card>
                                            <v-card-title>
                                              删除评论
                                            </v-card-title>
                                            <v-card-text>确认删除“{{item.nickname}}”的评论吗？</v-card-text>
                                            <br><br>
                                            <v-card-actions>
                                              <v-spacer></v-spacer>
                                              <v-btn text @click="dialog.value = false">
                                                取消
                                              </v-btn>
                                              <v-btn text @click="delete_comment(item,dialog)" color="#A94600">
                                                确认
                                              </v-btn>
                                            </v-card-actions>
                                          </v-card>
                                        </template>
                                      </v-dialog>
                                    </v-col>
                                    <!--                                    顶级评论的回复和收起按钮-->
                                    <v-col cols="12" lg="1">
                                      <a type="text" style="color: #2C2E2D" @click="show_reply(item)" v-if="!item.show_input">
                                        <v-icon left size="18px">mdi-comment-outline</v-icon>
                                        <span>回复</span>
                                      </a>
                                      <a type="text" style="color: #2C2E2D" @click="hide_reply(item)" v-else>
                                        <v-icon left size="18px">mdi-comment-outline</v-icon>
                                        <span>收起</span>
                                      </a>
                                    </v-col>
                                  </v-row>
                                </v-list-item-subtitle>
                                <p style="line-height: 20px; white-space: pre-line">{{item.content}}</p>
                                <!--                                顶级评论的回复框-->
                                <div style="padding-top: 1vh" v-if="item.show_input">
                                  <a-textarea
                                    :id="item.id"
                                    v-model="children_comment_content"
                                    style="background-color: rgba(255,255,255,0.5)"
                                    placeholder='回复'
                                    :auto-size="{ minRows: 3, maxRows: 5 }"
                                    @onchange="reply_word_limit($event)"
                                    @onkeydown="reply_word_limit($event)"
                                    :onkeyup="reply_word_limit()"
                                  />
                                  <v-row no-gutters justify-lg="end">
                                    <v-col cols="12" lg="9" style="text-align: left">
                                      <v-subheader>
                                        还可输入&nbsp;&nbsp;<span style="color: #2C2E2D">{{reply_length}}</span>&nbsp;&nbsp;个字符
                                      </v-subheader>
                                    </v-col>
                                    <v-col cols="12" lg="1" style="text-align: right">
                                      <v-subheader>
                                        <v-menu scale offset-y>
                                          <template v-slot:activator="{ on, attrs }">
                                            <v-btn v-bind="attrs" v-on="on" icon @click="picker_selected = item.id">
                                              <v-icon>mdi-emoticon</v-icon>
                                            </v-btn>
                                          </template>
                                          <!--                                          顶级评论的回复框的表情选择器-->
                                          <picker
                                            style="height: 25vh"
                                            :include="['people','Smileys']"
                                            :showSearch="false"
                                            :showPreview="false"
                                            :showCategories="false"
                                            @select="addEmoji"
                                          />
                                        </v-menu>
                                      </v-subheader>
                                    </v-col>
                                    <v-col cols="12" lg="2" style="text-align: center">
                                      <v-subheader>
                                        <v-btn rounded outlined color="grey" width="6vw" @click="reply_comment(item.id,item.id)">
                                          <span style="color: #2C2E2D">回复</span>
                                        </v-btn>
                                      </v-subheader>
                                    </v-col>
                                  </v-row>
                                </div>
                                <!--                                子评论列表-->
                                <div v-if="item.children.length!==0">
                                  <el-button
                                    v-if="item.show_children===false"
                                    type="text"
                                    @click="item.show_children=true;children_show += 1"
                                  >
                                    <span style="color: #89B8CA; font-family: 微软雅黑,serif; letter-spacing: 1px">
                                      查看全部{{item.children.length}}条回复
                                    </span>
                                  </el-button>
                                  <v-list v-else style="background-color: #F9F9F3">
                                    <template v-for="(child_item, index) in item.children">
                                      <v-divider></v-divider>
                                      <v-list-item :key="index">
                                        <v-list-item-avatar size="28" @click="visitUser(child_item.userId)" style="cursor: pointer">
                                          <v-img :src="child_item.profilepic"></v-img>
                                        </v-list-item-avatar>
                                        <v-list-item-content>
                                          <v-list-item-subtitle style="padding-bottom: 1vh">
                                            <v-row no-gutters>
                                              <v-col cols="12" lg="6" style="text-align: left">
                                                <span @click="visitUser(child_item.userId)" style="cursor: pointer">{{child_item.nickname}}</span>
                                                <span style="color: #89B8CA">&nbsp;回复&nbsp;</span>
                                                <span @click="visitUser(child_item.puserId)" style="cursor: pointer">{{child_item.pnickname}}</span>
                                                &nbsp;&nbsp;&nbsp;&nbsp;{{child_item.relativeTime}}
                                              </v-col>
                                              <v-col cols="12" lg="4"></v-col>
                                              <v-col cols="12" lg="1">
                                                <v-dialog
                                                  max-width="370"
                                                >
                                                  <template v-slot:activator="{ on, attrs }">
                                                    <a type="text" style="color: #2C2E2D"
                                                       v-bind="attrs"
                                                       v-on="on"
                                                       v-if="isMine || child_item.mine">
                                                      <v-icon left size="18px">mdi-delete-empty-outline</v-icon>
                                                      <span>删除</span>
                                                    </a>
                                                  </template>
                                                  <template v-slot:default="dialog">
                                                    <v-card>
                                                      <v-card-title>
                                                        删除评论
                                                      </v-card-title>
                                                      <v-card-text>确认删除“{{child_item.nickname}}”的评论吗？</v-card-text>
                                                      <br><br>
                                                      <v-card-actions>
                                                        <v-spacer></v-spacer>
                                                        <v-btn text @click="dialog.value = false">
                                                          取消
                                                        </v-btn>
                                                        <v-btn text @click="delete_comment(child_item,dialog)" color="#A94600">
                                                          确认
                                                        </v-btn>
                                                      </v-card-actions>
                                                    </v-card>
                                                  </template>
                                                </v-dialog>
                                              </v-col>
                                              <v-col cols="12" lg="1">
                                                <a style="color: #2C2E2D" @click="show_reply(child_item)" v-if="!child_item.show_input">
                                                  <v-icon left size="18px">mdi-comment-outline</v-icon>
                                                  回复
                                                </a>
                                                <a type="text" style="color: #2C2E2D" @click="hide_reply(child_item)" v-else>
                                                  <v-icon left size="18px">mdi-comment-outline</v-icon>
                                                  <span>收起</span>
                                                </a>
                                              </v-col>
                                            </v-row>
                                          </v-list-item-subtitle>
                                          <p style="line-height: 20px; white-space: pre-line">{{child_item.content}}</p>
                                          <!--                                          子评论的回复框-->
                                          <div style="padding-top: 1vh" v-if="child_item.show_input">
                                            <a-textarea
                                              :id="child_item.id"
                                              v-model="children_comment_content"
                                              placeholder='回复'
                                              style="background-color: rgba(255,255,255,0.5)"
                                              :auto-size="{ minRows: 3, maxRows: 5 }"
                                              @onchange="reply_word_limit($event)"
                                              @onkeydown="reply_word_limit($event)"
                                              :onkeyup="reply_word_limit()"
                                            />
                                            <v-row no-gutters justify-lg="end">
                                              <v-col cols="12" lg="9" style="text-align: left">
                                                <v-subheader>
                                                  还可输入&nbsp;&nbsp;<span style="color: #2C2E2D">{{reply_length}}</span>&nbsp;&nbsp;个字符
                                                </v-subheader>
                                              </v-col>
                                              <v-col cols="12" lg="1" style="text-align: right">
                                                <v-subheader>
                                                  <v-menu scale offset-y>
                                                    <template v-slot:activator="{ on, attrs }">
                                                      <v-btn v-bind="attrs" v-on="on" icon @click="picker_selected = child_item.id">
                                                        <v-icon>mdi-emoticon</v-icon>
                                                      </v-btn>
                                                    </template>
                                                    <!--                                                    子评论的回复框的表情选择器-->
                                                    <picker
                                                      style="height: 25vh"
                                                      :include="['people','Smileys']"
                                                      :showSearch="false"
                                                      :showPreview="false"
                                                      :showCategories="false"
                                                      @select="addEmoji"
                                                    />
                                                  </v-menu>
                                                </v-subheader>
                                              </v-col>
                                              <v-col cols="12" lg="2" style="text-align: center">
                                                <v-subheader>
                                                  <v-btn rounded outlined color="grey" width="6vw"
                                                         @click="reply_comment(child_item.id,item.id)">
                                                    <span style="color: #2C2E2D">回复</span>
                                                  </v-btn>
                                                </v-subheader>
                                              </v-col>
                                            </v-row>
                                          </div>
                                        </v-list-item-content>
                                      </v-list-item>
                                    </template>
                                  </v-list>
                                </div>
                              </v-list-item-content>
                            </v-list-item>
                          </template>
                        </v-list>
                        <v-pagination
                          v-if="total!==0&&total!==1"
                          v-model="page"
                          :length="total"
                          @input="change_page(page)"
                          circle
                        ></v-pagination>
                      </v-container>
                    </v-sheet>
                  </v-col>
                </v-row>
              </v-col>

            </v-row>
          </v-col>
        </v-row>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
import request from "@/utils/request"
const { Picker } = window.EmojiMart

export default{
  name: "Solution_Detail",
  components: { Picker },
  data: () => ({
    userId: -1, //当前登录用户id
    solutionId: -1, //当前解决方案id
    userInfo: {}, //用户基本信息
    solution_info: {}, //当前解决方案具体信息
    userSolutionInfo: {}, //用户总计解决方案数据
    solutionBaseInfo: {}, //当前解决方案基本信息
    score_data: {}, //历史打分数据
    content: '', //富文本编辑器内容——解决方案内容展示
    recent_solution: [], //最近五篇解决方案
    comment_list: [], //评论列表
    comment_count: 0, //总计评论数
    comment_content: '', //评论框输入内容——主评论框
    children_comment_content: '', //回复评论框输入内容（所有评论共享）
    input_length: 200, //评论框剩余可输入字数
    reply_length: 200, //回复框剩余可输入字数
    page: 1, //评论当前页数
    total: 0, //评论总页数
    children_show: 0, //控制子评论列表重新渲染的key
    picker_selected: 'comm', //当前选中的表情选择器的id
    delete_confirm: false, //删除确认对话框
    rating: 0.0, //评分

    followState: false, //是否关注
    isMine: false, // 是否当前用户
    collectState: false, //是否收藏
    followObj: {} //关注对象
  }),
  methods: {
    async get_comment(PageNum) { //获取评论
      await this.checkFollowState()
      request.get("/s-comment/getBySolution",{
        params: {
          PageNum: PageNum,
          PageSize: 5,
          solution_id: this.parseJSONCapture(this.decodeCapture(this.$route.query.solution))
        }
      }).then(res => {
        if (res.code === '200'){
          if (res.data === null){
            this.comment_list = []
            this.comment_count = 0
            this.total = 0
          }
          else {
            this.comment_list = res.data.list
            this.comment_count = res.data.total
            this.total = Math.ceil(res.data.originCount / 5)
            for(let comment of this.comment_list) {
              comment.show_input = false
              if(comment.children.length !== 0) {
                comment.show_children = false
                for(let c of comment.children) {
                  c.show_input = false
                }
              }
            }
            this.children_show += 1
          }
        }
      })
    },
    change_page(pageNum) { //评论翻页
      this.get_comment(pageNum)
    },
    word_limit() { //修改评论编辑框事件——统计和限制字数
      this.comment_content = this.comment_content.substring(0, 200)
      this.input_length = 200 - this.comment_content.length
    },
    reply_word_limit() { //修改回复编辑框事件——统计和限制字数
      this.children_comment_content = this.children_comment_content.substring(0, 200)
      this.reply_length = 200 - this.children_comment_content.length
    },
    show_reply(item) { //点击回复按钮事件
      this.children_comment_content='' //清空回复框内容
      for(let comment of this.comment_list) { //遍历所有评论，设置回复框不可见
        comment.show_input = false
        if(comment.children.length !== 0) {
          for(let c of comment.children) {
            c.show_input = false
          }
        }
      }
      this.picker_selected = item.id //设置当前选中的表情选择器的id
      item.show_input = true //设置当前回复框可见
      this.children_show += 1 //重新渲染
    },
    hide_reply(item) { //收起回复框按钮事件
      item.show_input = false //设置当前回复框不可见
      this.children_show += 1 //重新渲染
    },
    send_comment() { //发布评论
      if(this.comment_content.split('\n').join('').split(' ').join('').length === 0) {
        this.sendWarnMessage('请输入评论内容')
      } else {
        let s_comment = {}
        s_comment.userId = -1
        s_comment.solutionId = this.solutionId
        s_comment.content = this.comment_content
        request.post("/s-comment",s_comment).then(res => {
          if(res.code === '200') {
            this.comment_content = ''
            this.page = 1
            this.get_comment(this.page)
            this.sendSuccessMessage('评论成功')
          }
          else {
            this.sendWarnMessage(res.msg)
            this.get_comment(this.page)
          }
        })
      }
    },
    reply_comment(pid,originId) { //回复评论
      if(this.children_comment_content.split('\n').join('').split(' ').join('').length === 0) {
        this.sendWarnMessage('请输入评论内容')
      } else {
        let s_comment = {}
        s_comment.userId = -1
        s_comment.solutionId = this.solutionId
        s_comment.content = this.children_comment_content
        s_comment.pid = pid
        s_comment.originId = originId
        request.post("/s-comment",s_comment).then(res => {
          if(res.code === '200') {
            this.children_comment_content = ''
            this.get_comment(this.page)
            this.sendSuccessMessage('评论成功')
          } else {
            this.sendWarnMessage('评论失败')
            this.get_comment(this.page)
          }
        })
      }
    },
    addEmoji(emotion){ //添加表情
      if(this.input_length < 2) {
        this.$message.warning("超过最大字数，无法插入表情")
      } else {
        let textarea = document.getElementById(this.picker_selected)
        if (window.getSelection) {
          // 非IE浏览器
          textarea.setRangeText(emotion.native);
          // 在未选中文本的情况下，重新设置光标位置
          textarea.selectionStart += emotion.native.length;
          textarea.focus()
          if(this.picker_selected === 'comm') {
            this.comment_content = textarea.value
          } else {
            this.children_comment_content = textarea.value
          }
        } else if (document.selection) {
          // IE浏览器
          this.comment_content.focus();
          let sel = document.selection.createRange();
          sel.text = emotion.native;
        }
      }
    },
    delete_comment(item,dialog) { //删除评论
      request.delete("/s-comment/"+item.id).then(res => {
        if(res.code==='200') {
          this.sendSuccessMessage('删除评论成功')
          this.get_comment(this.page)
        } else {
          this.sendWarnMessage('删除评论失败')
          this.get_comment(this.page)
        }
      })
      dialog.value = false
    },
    goto_comment() { //滚动到评论区
      this.$vuetify.goTo(this.$refs.comment_area, {
        duration: 500,
        offset: 50,
        easing: 'easeInOutCubic',
      })
    },
    // 关注按钮操作
    followAction(){
      if (this.followState === false)
        this.follow()
      else
        this.cancelFollow()
    },
    // 关注
    follow(){
      this.followObj.userId = -1
      this.followObj.fouserId = this.userInfo.id
      request.post('/follow/insertFollow', this.followObj).then(res => {
        if (res.code === '200'){
          this.sendSuccessMessage('关注成功')
          this.followState = true
        }
        else {
          this.sendWarnMessage(res.msg)
          this.checkFollowState()
        }
      })
    },
    // 取消关注
    cancelFollow(){
      request.delete('/follow/deleteFollow', {
        params:{
          fouserId: this.userInfo.id
        }
      }).then(res => {
        if (res.code === '200'){
          this.sendSuccessMessage('取消关注成功')
          this.followState = false
        }
        else {
          this.sendWarnMessage(res.msg)
          this.checkFollowState()
        }
      })
    },
    visitUser(id){
      let routeUrl = this.$router.resolve({
        path: "/userInfo",
        query:{user: window.btoa(window.encodeURIComponent(id))}
      });
      window.open(routeUrl.href, '_blank');
    },
    give_score() { //打分
      let score = {}
      score.userId = -1
      score.solutionId = this.parseJSONCapture(this.decodeCapture(this.$route.query.solution))
      score.score = this.rating
      request.post("/score", score).then(res => {
        if(res.code === '200'){
          this.sendSuccessMessage('评分成功')
          this.get_score_data()
        }else {
          this.sendWarnMessage('评分失败')
          this.$router.go(0)
        }

      })
    },
    get_score() { //获取当前用户打分情况
      request.get("/score/getBySolution",{
        params: {
          solutionId: this.parseJSONCapture(this.decodeCapture(this.$route.query.solution))
        }
      }).then(res => {
        if(res.data !== null) {
          this.rating = res.data
        }
      })
    },
    get_score_data() { //获取历史打分数据
      request.get("/score/getScoreAndCount", {
        params: {
          solutionId: this.parseJSONCapture(this.decodeCapture(this.$route.query.solution))
        }
      }).then(res => {
        this.score_data = res.data
      })
    },
    // 检查是否收藏
    checkCollectionState(){
      request.get('/s-collection/judge', {
        params: {
          solutionId: this.parseJSONCapture(this.decodeCapture(this.$route.query.solution))
        }
      }).then(res => {
        if (res.code === '200'){
          this.collectState = res.data
        }
      })
    },
    // 收藏按钮操作
    collectAction(){
      if (this.collectState === false)
        this.collect()
      else
        this.cancelCollect()
    },
    // 收藏
    collect(){
      request.post('/s-collection', {
        userId: -1,
        solutionId: this.parseJSONCapture(this.decodeCapture(this.$route.query.solution))
      }).then(res => {
        if (res.code === '200'){
          this.sendSuccessMessage('收藏成功')
          this.collectState = true
          this.checkFollowState()
        }
        else {
          this.sendWarnMessage(res.msg)
          this.checkCollectionState()
          this.checkFollowState()
        }
      })
    },
    // 取消收藏
    cancelCollect(){
      request.delete('/s-collection', {
        params:{
          solutionId: this.parseJSONCapture(this.decodeCapture(this.$route.query.solution))
        }
      }).then(res => {
        if (res.code === '200'){
          this.sendSuccessMessage('取消收藏成功')
          this.collectState = false
          this.checkFollowState()
        }else {
          this.sendWarnMessage(res.msg)
          this.checkCollectionState()
          this.checkFollowState()
        }
      })
    },
    get_solution(solution_id) { //获取解决方案内容
      return request.get("/solution/getDetails",{params: {solution_id: solution_id}})},
    // 检查是否关注
    async checkFollowState(){
      let res = await this.get_solution(this.parseJSONCapture(this.decodeCapture(this.$route.query.solution)))
      if (res.code === '200'){
        this.solution_info = res.data
        //处理大于10000的浏览量数据
        if(this.solution_info.userSolutionDTO.view >= 10000) {
          this.solution_info.userSolutionDTO.view = Math.floor(this.solution_info.userSolutionDTO.view/10000) + "万+"
        }
        this.recent_solution = this.solution_info.userSolutionDTO.solutionList
        this.content = res.data.detail
        this.isMine = res.data.mine
        this.userInfo = res.data.userSolutionDTO.userDTO
        this.userSolutionInfo = res.data.userSolutionDTO
        this.solutionBaseInfo = res.data.solutionDTO
        await request.get('/follow/findFollowee').then(result => {
          if (result.code === '200'){
            let tmp = []
            for (let i = 0; i < result.data.length; i++){
              tmp.push(result.data[i].userDTO.id)
            }
            this.followState = tmp.indexOf(res.data.userSolutionDTO.userDTO.id) !== -1
          }
        })
      }
    },
    parseJSONCapture(str) {
      try {return JSON.parse(str);}
      catch (e) {
        this.$router.push('/solution404')
      }
    },
    decodeCapture(str) {
      try {return decodeURIComponent(window.atob(str))}
      catch (e) {
        this.$router.push('/solution404')
      }
    },
    // 校验访问合法性
    verify(){
      if (!this.$route.query.solution)
        this.$router.push('/solution404')
      let sid = this.parseJSONCapture(this.decodeCapture(this.$route.query.solution))
      request.get('/solution', {params:{id: sid}}).then(res =>{
        if (res.code === '200'){
          if(res.data.statement !== '已发布'){
            this.$router.push('/solution404')
          }
          else
            document.title = res.data.name
        }else {
          this.$router.push('/solution404')
        }
      })
    },
    visit(item){ //打开一个方案并跳转
      request.get('/solution', {
        params: {
          id: item.id
        }
      }).then(res =>{
        if (res.code === '200'){
          if(res.data.statement !== '已发布'){
            let notfoundUrl = this.$router.resolve({path: "/solution404"})
            window.open(notfoundUrl.href, '_blank')
          }
          else{
            request.post('/solution/updateView', {id: parseInt(item.id)}).then(res => {
              let routeUrl = this.$router.resolve({
                path: "/solutionInfo",
                query:{solution: window.btoa(window.encodeURIComponent(item.id))}
              });
              window.open(routeUrl.href, '_blank');
            })
          }
        }else {
          let notfoundUrl = this.$router.resolve({path: "/solution404"})
          window.open(notfoundUrl.href, '_blank')
        }
      })
    },
  },

  created() {
    this.verify()
    this.solutionId = this.parseJSONCapture(this.decodeCapture(this.$route.query.solution))
    this.get_comment(this.page)
    this.checkCollectionState()
    this.get_score()
    this.get_score_data()
  }
}
</script>

<style scoped>
.emoji-mart[data-v-7bc71df8] {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 420px;
  color: #ffffff !important;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  background: #fff;
}
a:hover{
  color: #c1cbd7;
}
</style>
